<template>
  <div>
    <div class="fireFightingBody py-1 px-1 bg-white d-scroll listInner">
      <custom-title :is-line="true" title="设备信息" />
      <div class="baseLoad">
        <div v-for="(item, index) in descList" :key="index">
          <custom-details-item one-color :label="item.label" :value="item.value" :icon="item.icon" />
        </div>
      </div>
      <template>
        <custom-title :is-line="true" title="检查记录" />
        <div class="common_list" style="padding: 0">
          <template v-if="xfExamineList && xfExamineList.length>0">
            <div v-for="(item, index) in xfExamineList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item.examineTime }}</div>
                  <ul>
                    <!--                    <li>-->
                    <!--                      <i class="iconfont c-text-color2">&#xe634;</i>-->
                    <!--                      <div class="label">检验日期：</div>-->
                    <!--                      <div class="value">{{ item.examineTime }}</div>-->
                    <!--                    </li>-->
                    <li>
                      <i class="iconfont c-text-color1">&#xe664;</i>
                      <div class="label">检验结果：</div>
                      <div class="value">{{ item.conclusion }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe664;</i>
                      <div class="label">下次检验日期：</div>
                      <div class="value">
                        {{ item.nextTime }}
                        <span v-if="item.nextTimeState === '已超期'" class="tag-tip" style="--color:red">{{ item.nextTimeState }}</span>
                        <span v-if="item.nextTimeState === '临期'" class="tag-tip" style="--color:orange">{{ item.nextTimeState }}</span>
                      </div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color3">&#xe664;</i>
                      <div class="label">备注：</div>
                      <div class="value">{{ item.deviceRemark }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else class="baseLoad1" />
        </div>
      </template>

      <template>
        <custom-title :is-line="true" title="维修记录" />
        <div class="common_list" style="padding: 0">
          <template v-if="listData && listData.length>0">
            <div v-for="(item, index) in listData" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item.repairTime }}</div>
                  <ul>
                    <!--                    <li>-->
                    <!--                      <i class="iconfont c-text-color1">&#xe725;</i>-->
                    <!--                      <div class="label">维修日期：</div>-->
                    <!--                      <div class="value">{{ item.repairTime }}</div>-->
                    <!--                    </li>-->
                    <li>
                      <i class="iconfont c-text-color1">&#xe634;</i>
                      <div class="label">维修结果：</div>
                      <div class="value">{{ item.repairResult }}</div>
                    </li>
                    <li>
                      <i class="iconfont c-text-color2">&#xe664;</i>
                      <div class="label">备注：</div>
                      <div class="value">{{ item.repairContent }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else class="baseLoad2" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { xfDeviceDetail } from '@/api/commonPage/facility'

export default {
  name: 'BasicComponent',
  inject: ['layout'],
  data() {
    return {
      companyName: '',
      active: '',
      current: '',
      companyId: '',
      descList: [
        { icon: '&#xe62c;', label: '设施名称', value: '/', fieldName: 'deviceName' },
        { icon: '&#xe790;', label: '企业名称', value: '/', fieldName: 'companyName' },
        { icon: '&#xe629;', label: '设施编号', value: '/', fieldName: 'deviceCode' },
        { icon: '&#xe6aa;', label: '所在位置', value: '/', fieldName: 'deviceAddr' },
        { icon: '&#xe6aa;', label: '设施类型', value: '/', fieldName: 'deviceType' },
        { icon: '&#xe6a2;', label: '设施状态', value: '/', fieldName: 'active' },
        { icon: '&#xe6a2;', label: '识别标识码', value: '/', fieldName: 'identificationCode' },
        { icon: '&#xe87e;', label: '是否安装在消防重点部位', value: '/', fieldName: 'isImportAddr' }
        // { label: '数量', value: '10', fieldName: 'foundTime' },
        // { label: '使用寿命', value: '7年', fieldName: 'provinceName,cityName,countyName' },
        // { icon: '&#xe87e;', label: '所在位置', value: '', fieldName: 'deviceAddr' },
        // { icon: '&#xe617;', label: '投入使用日期', value: '', fieldName: 'putUseTime' },
        // { icon: '&#xe685;', label: '下次检验时间', value: '', fieldName: 'nextTime' }
      ],
      listData: [],
      descData: {},
      xfExamineList: []
    }
  },
  created() {
    const { current, examineId, active } = this.$route.query
    this.examineId = examineId || ''
    this.current = current || ''
    this.active = active || ''
  },
  async mounted() {
    // this.layout.showLoading()
    this.layout.showAreaLoading(['.baseLoad'])
    this.layout.showAreaLoading(['.baseLoad1'])
    this.layout.showAreaLoading(['.baseLoad2'])
    const { data, status } = await xfDeviceDetail({ examineId: this.examineId })
    if (status === 0 && data) {
      const resData = { ...data, ...this.$route.query }
      this.descList.forEach(v => {
        v.value = resData[v.fieldName] ? resData[v.fieldName] : v.value
      })
      this.descData = data
      this.listData = resData.xfRepairList
      this.xfExamineList = resData.xfExamineList
    }
    // this.layout.hideLoading()
    this.layout.hideAreaLoading(['.baseLoad'])
    this.layout.hideAreaLoading(['.baseLoad1'])
    this.layout.hideAreaLoading(['.baseLoad2'])
  },
  methods: {
    // 获取企业详情数据--基本信息
  }
}
</script>

<style lang="scss" scoped>
.olMap {
  width: 100%;
  height: 350px;
}
.tag-tip{
  border: 1px solid var(--color);
  padding: 3px 5px;
  display: inline-block;
  color: var(--color)
}
.common_list .list_item .content_area .right_content ul li{
  align-items: center;
}
</style>
